<!-- 角色管理 -->
<template>
  <div>
    <!-- 添加部分 -->
    <div>
      <span>角色名称：</span>
      <el-input v-model.trim="roleAdd.name" placeholder="角色名称" clearable />
      <span>描述信息：</span>
      <el-input v-model.trim="roleAdd.desc" placeholder="描述信息" clearable />
      <el-button
        type="primary"
        @click="debounce(addRole)"
        v-btn="'sys:role:create'"
        >添加</el-button
      >
    </div>
    <!-- 角色表格 -->
    <div style="margin-top: 20px">
      <el-table :data="roleList" border>
        <el-table-column prop="name" label="角色名称" width="300" />
        <el-table-column prop="desc" label="说明" width="300" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              @click="alterRole(scope.row)"
              v-btn="'sys:role:update'"
              >修改</el-button
            >
            <el-button
              type="primary"
              @click="getPermission(scope.row.id)"
              v-btn="'sys:role:permissionlist'"
              >授权</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹出框 -->
    <el-dialog v-model="alterShow" title="修改" draggable>
      <!-- 修改的部分 -->
      <div class="alter_popup">
        <div>
          <p>角色名称：</p>
          <el-input
            v-model.trim="roleAlter.name"
            placeholder="角色名称"
            clearable
          />
        </div>
        <div>
          <p>描述信息：</p>
          <el-input
            v-model.trim="roleAlter.desc"
            placeholder="描述信息"
            clearable
          />
        </div>
        <el-button
          type="primary"
          @click="submitAlter"
          style="align-self: flex-end"
          >修改</el-button
        >
      </div>
    </el-dialog>

    <!-- 权限的配制 -->
    <el-dialog v-model="powerShow" title="权限配置" draggable>
      <div>
        <el-tree
          ref="tree"
          :data="systemPermissions"
          show-checkbox
          node-key="id"
          highlight-current
          :props="defaultProps"
        >
          <template #default="{ node, data }">
            <div
              style="width: 100%; display: flex; justify-content: space-between"
            >
              <span>{{ node.label }}</span>
              <span v-if="data.id != node.label">{{ data.id }}</span>
            </div>
          </template>
        </el-tree>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="powerShow = false">取消</el-button>
          <el-button type="primary" @click="setPermission">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <div style="margin-top: 20px">
      <paging v-bind="pageInfo" @changeReq="changeConfig"></paging>
    </div>
  </div>
</template>

<script>
import { post } from "@/utils/http";
import Paging from "@/components/paging/Paging";
export default {
  mounted() {
    this.getRole();
  },
  components: { Paging },
  data() {
    return {
      roleList: [], //角色列表
      roleRowId: 0, //角色id(当前行)
      systemPermissions: {}, //权限列表的数据
      roleLoad: {
        //加载列表的配置
        _gp: "admin.role",
        _mt: "list",
        page: 1, //跳转页数
        limit: 20, //显示条数
      },
      // 添加角色的数据
      roleAdd: {
        name: "",
        desc: "",
      },
      // 修改角色的数据
      roleAlter: {
        name: "",
        desc: "",
        id: 0,
      },
      // 传给分页组件的数据
      pageInfo: {
        page: 1, //跳转页数
        limit: 20, //显示条数
        total: 0,
      },
      alterShow: false, //修改弹出框是否显示
      powerShow: false, //权限弹出框是否显示
      //设置树形控件的配置
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    // 组件触发的数据改变
    changeConfig(data) {
      Object.assign(this.roleLoad, data);
      this.getRole();
    },
    // 获取角色
    getRole() {
      post(this.roleLoad)
        .then((res) => {
          if (200 == res.errno) {
            // console.log(res.data);
            this.roleList = res.data.items; //获取表格数据
            this.pageInfo.total = res.data.total; // 获取总页数
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加角色
    addRole() {
      let { name, desc } = this.roleAdd;
      if ((name ?? name) && (desc ?? desc)) {
        //??判断左侧是否存在，如果有返回右侧的值
        post({
          _gp: "admin.role",
          _mt: "create",
          role: JSON.stringify(this.roleAdd),
        })
          .then((res) => {
            if (200 == res.errno) {
              ElMessage.success("添加成功");
              if (this.roleList.length < 50) {
                this.getRole();
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
        return;
      }
      ElMessage.error("请填写必要信息,再进行添加操作");
    },
    // 修改角色
    alterRole(data) {
      this.roleAlter = { name: "", desc: "", id: 0 }; //重置数据
      Object.assign(this.roleAlter, data); //修改配置
      this.alterShow = true; //显示修改弹出框
    },
    // 提交修改角色
    submitAlter() {
      post({
        _gp: "admin.role",
        _mt: "update",
        role: JSON.stringify(this.roleAlter),
      })
        .then((res) => {
          this.getRole(); //刷新数据
          this.alterShow = false; //关闭修改弹出框
          ElMessage.success("修改成功");
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getPermission(id) {
      //获取对应id的权限列表
      this.powerShow = true;
      this.roleRowId = id;
      post({
        _gp: "admin.role",
        _mt: "permissionList",
        roleId: id,
      }).then((res) => {
        let { systemPermissions, assignedPermissions } = res.data;
        this.systemPermissions = systemPermissions;
        this.$refs.tree.setCheckedKeys(assignedPermissions);
        // console.log(res.data)
      });
    },
    setPermission() {
      //设置权限，发送请求
      post({
        _gp: "admin.role",
        _mt: "permissionSet",
        roleSetPermissionDTO: JSON.stringify({
          roleId: this.roleRowId,
          permissions: this.$refs.tree.getCheckedKeys(),
        }),
      }).then((res) => {
        this.powerShow = false; //关闭权限弹出框
        ElMessage.success("配置成功");
      });
    },
  },
};
</script>

<style scoped lang="less">
div > span {
  font-size: 0.8rem;
}
.el-input {
  width: 200px;
  margin-right: 15px;
}
.alter_popup {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
